<template>
  <div class="tab" v-if="isObject">
    <span v-for="(item,index) in tabsData" :key="index" @click="tabClick(item.index)" :class="currentIndex===item.index?'active':''">{{item.name}}</span>
    <div class="triped" :style="{transform:tripedPosition}"></div>
  </div>
  <div class="tab" id="name" v-else>
    <span v-for='(item,index) in tabsData' :key='index' :class="index===currentIndex?'active ':''" @click='tabClick(index,$event)'>{{item}}</span>
    <div class='triped' :style='{transform:tripedPosition}'></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      position: 0
    }
  },
  props: {
    currentIndex: {
      type: Number,
      default () {
        return 0
      }
    },
    tabsData: {
      type: Array,
      default () {
        return []
      }
    },
    isObject: {
      type: Boolean,
      default () {
        return false
      }
    }
  },
  methods: {
    tabClick (index) {
      const elements = this.$el.querySelectorAll('span')
      this.position = elements[index].offsetLeft
      this.$emit('tabClick', index)
    }
  },
  watch: {
    tabsData (val) {
      this.$nextTick(function () {
        const elements = this.$el.querySelectorAll('span')
        this.position = elements[this.currentIndex].offsetLeft
      })
    }
  },
  computed: {
    tripedPosition () {
      return `translate(${this.position}px,0)`
    }
  }
}
</script>

<style scoped lang="scss">
.tab {
  position: relative;
  margin: 10px 0 25px 25px;
  display: flex;
  span {
    &:not(:last-child) {
      margin-right: 20px;
    }
    color: $stable02;
    font-size: 18px;
    transition: all ease 0.35s;
    cursor: pointer;
    &.active {
      color: #000;
    }
  }
  .triped {
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 32px;
    height: 6px;
    background-color: $energized;
    transition: all ease 0.35s;
  }
}
</style>
